<template>
  <view class="app">
    <view class="detail-box">
      <!-- <view class="" v-html="description"> -->
      <mp-html :content="description" />
    </view>
  </view>
</template>

<script>
export default {
  components: {
  },

  data() {
    return {
      imgUrl: this.$apiFun.imgUrl,
      host: this.$apiFun.host,
      itemKey: '',
      description: '',
    }
  },
  onLoad(option) {
    if (option.itemKey) {
      this.itemKey = option.itemKey
      this.init()
    }
  },
  methods: {
    async init() {
      let data = await this.$apiFun.getApi(this.$api.configInfoApi, {
        itemKey: this.itemKey,
      })

      let imgDom = '<img style="width:100%!important;height:auto!important;" show-menu-by-longpress="{{true}}" mode="widthFix" src="'
      data.value = data.value.replace(/<img src="/gi, imgDom)
      let srcs = 'src="' + this.host + '/'
      data.value = data.value.replace(/src="/gi, srcs)
      this.description = data.value
    },
  },
  onReachBottom() {

  }
}
</script>
<style>
page {
  height: 100%;
  background: #000000;
  color: white;
}

rich-text {
  color: rgba(255, 255, 255, .7);
}

.detail-box uni-view {
  color: rgba(255, 255, 255, 1);
}
</style>
<style scoped lang="less">
page {
  width: 100%;
  height: 100%;

  .app {
    width: 100%;
    height: 100%;
    padding: 20rpx;
    box-sizing: border-box;

    .detail-box {
      margin-top: 20rpx;
      padding: 20rpx;
      box-sizing: border-box;
      background-color: rgba(255, 255, 255, .1);
    }
  }
}
</style>
